<template>
  <div class="screen">
    <div class="select">
      <select name="年龄" class="age" v-model="aval">
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
      </select>
      <select name="性别" class="sex" v-model="sval">
        <option value="1">男</option>
        <option value="0">女</option>
      </select>
      <input type="text" class="text" v-model="nval" />
      <button class="button" @click="query">查询</button>
    </div>
    <table class="list">
      <thead>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </thead>
      <tbody v-if="res">
        <tr v-for="(item, index) of options" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.sex == 1 ? "男" : "女" }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr v-for="(item, index) of result" :key="index + 1">
          <td>{{ item.name }}</td>
          <td>{{ item.sex == 1 ? "男" : "女" }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      res:true,
      aval: "20",
      sval: "1",
      nval: "",
      options: [
        {
          name: "李某某",
          age: "25",
          sex: "1",
        },
        {
          name: "张某某",
          age: "36",
          sex: "0",
        },
        {
          name: "刘某某",
          age: "32",
          sex: "0",
        },
        {
          name: "王某某",
          age: "28",
          sex: "1",
        },
        {
          name: "赵某某",
          age: "45",
          sex: "0",
        },
        {
          name: "杨某某",
          age: "23",
          sex: "0",
        },
        {
          name: "钱某某",
          age: "36",
          sex: "1",
        },
        {
          name: "孙某某",
          age: "45",
          sex: "1",
        },
      ],
      result: [],
    };
  },
  methods: {
    query() {
      this.result = [];
      this.options.filter((e) => {
        if (
          e.age > this.aval &&
          e.sex == this.sval &&
          e.name.indexOf(this.nval) != -1
        ) {
          this.result.push(e);
          this.res=false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.screen {
  > .select {
    margin: 0 auto;
    width: 500px;
    > .age,
    .sex,
    .text {
      width: 60px;
      height: 35px;
      font-size: 25px;
      margin-right: 20px;
    }
    > .button {
      width: 100px;
      height: 40px;
      font-size: 25px;
    }
  }
  > .list {
    list-style-type: none;
    margin: 20px auto;
    width: 500px;
    background-color: #eee;
    padding: 20px;
    border-collapse: collapse;
    > thead {
      font-size: 20px;
      height: 60px;
      border-bottom: 1px dotted #999;
    }
    > tbody > tr {
      height: 40px;
      border-bottom: 1px dotted #999;
    }
  }
}
</style>